<template>
    <div class="right-panel">
        <vue-scroll :ops="$root.scrollOpsY">

            <div class="panel-item" v-for="(item,index) in panelList">
                <div class="panel-item-head">
                    <span class="head-time">00:00～23:59</span>
                    <el-select class="hy_select" v-model="value" placeholder="策略选择" >
                        <el-option
                                v-for="item in selectOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>

                    <span class="head-text">这是一个名称</span>
                    <img class="head-icon is_hover" src="../../../assets/images/zzjhpz/icon_edit.png" alt="">

                    <div class="handle-btn">
                        <el-button class="hy_btn"><img src="../../../assets/images/zzjhpz/icon_add.png" alt="">新增组合计划</el-button>
                        <el-button class="hy_btn is_primary" type="primary" @click="btnClick()">提交</el-button>
                    </div>
                </div>

                <div class="panel-item-body">
                    <el-row :gutter="5">
                        <el-col :span="8">
                            <span class="item-label">电解槽最小出力</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">kW</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="item-label">储氢罐2压力上限</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">MPa</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="item-label">储氢罐2压力上限</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">MPa</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="5">
                        <el-col :span="8">
                            <span class="item-label">储氢罐1压力上限</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">kW</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="item-label">储氢罐2压力下限</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">MPa</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="item-label">燃料电池最大功率</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">kW</span>
                        </el-col>
                    </el-row>
                    <el-row :gutter="5">
                        <el-col :span="8">
                            <span class="item-label">储氢罐1压力下限</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">kW</span>
                        </el-col>
                        <el-col :span="8">
                            <span class="item-label">联络线功率限制值</span>
                            <el-input class="item-value" v-model="value" placeholder=""></el-input>
                            <span class="item-unit">MPa</span>
                        </el-col>
                        <el-col :span="8"></el-col>
                    </el-row>
                </div>
            </div>

            <div class="panel-add">
                <el-button  icon="el-icon-plus" @click="handleAdd()">新增时间段</el-button>
            </div>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
                           :contentHide="true"
            ></ControlDialog>

        </vue-scroll>
    </div>
</template>

<script>
    import ControlDialog from '../../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                panelList: [
                    {},
                ],
                selectOptions: [],
                value: '',
                dialogTitle: '操作人员身份确认',
            }
        },
        methods: {
            handleAdd() {
                this.panelList.push({});
            },

            btnClick( ) {
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less" scoped>
    .right-panel {
        width: 100%;
        height: 100%;

        .panel-item {
            width: 100%;
            height: 312px;
            background: #FFFFFF;
            border-radius: 8px;
            margin-bottom: 28px;

            >.panel-item-head {
                width: 100%;
                height: 96px;
                line-height: 40px;
                border-bottom: 1px solid #EEEFF2;
                box-sizing: border-box;
                padding: 28px 40px;

                .head-time {
                    width: 215px;
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 30px;
                    font-weight: 600;
                    color: #0E1526;
                }

                >.el-select {
                    margin-right: 100px;
                    vertical-align: middle;
                    position: relative;
                    top: -5px;
                }

                >.head-text {
                    display: inline-block;
                    vertical-align: middle;
                    font-size: 16px;
                    /*font-weight: 600;*/
                    color: #535763;
                }

                >.head-icon {
                    display: inline-block;
                    vertical-align: middle;
                    margin-left: 10px;
                }

                >.handle-btn {
                    display: inline-block;
                    float: right;
                }
            }

            >.panel-item-body {
                width: 100%;
                height: calc( 100% - 96px );
                line-height: 32px;
                box-sizing: border-box;
                padding: 29px 70px;

                >.el-row {
                    height: 52px;
                    padding-top: 10px;
                    padding-bottom: 10px;

                    .item-label {
                        display: inline-block;
                        vertical-align: middle;
                        width: 134px;
                        color: #0E1526;
                        font-size: 14px;
                    }

                    .el-input {
                        width: 80px;

                        /deep/.el-input__inner {
                            background-color: #F9FAFE;
                            border-radius: 4px;
                            border: 1px solid #CFD1D8;
                            height: 32px;
                            line-height: 30px;
                        }
                    }

                    .item-unit {
                        margin-left: 12px;
                        color: #535763;
                        font-size: 14px;
                    }
                }
            }
        }

        .panel-add {
            width: 100%;
            height: 180px;
            background: #FFFFFF;
            border-radius: 8px;
            position: relative;

            >.el-button {
                height: 40px;
                width: 140px;
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                padding: 0 18px;

                /deep/.el-icon-plus {
                    font-size: 16px;
                    font-weight: 600;
                    color: #9A9FAF;
                }

                /deep/span {
                    font-size: 16px;
                    font-weight: 600;
                    color: #0E1526;
                }
            }
        }
    }
</style>
